import React, { Component } from 'react'
import MenuConfig from './../../config/menuConfig'
import { Menu, Icon } from 'antd';
import {NavLink } from 'react-router-dom'
import './index.css'
const SubMenu = Menu.SubMenu;

class NavLeft extends Component {
    constructor(props){
        super(props);
       
      }
      componentWillMount() {
        console.log(MenuConfig);
        //加载菜单数据
        const menuTreeNode = this.renderMenu(MenuConfig);
        console.log(menuTreeNode);
        this.setState(
            {
                menuTreeNode
            }
        )
    }
    //菜单渲染
    renderMenu = (data) => {
        // console.log
        return data.map((item) => {
            if (item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
              <NavLink to={item.key}>{item.title}</NavLink> 
            </Menu.Item>
        })
    }
    render() {
        return (
            <div >
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="雅比斯" />
                    <h1>chinayabisi</h1>
                </div>
              <Menu theme="dark" mode="vertical">                  
                   {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}
export default NavLeft;